<template>
    <div class="navbar">
        <div class="logo_div">
            <img src="../assets/logo.png" class="logo">
        </div>
        <el-menu
        default-active="1-4-1"
        active-text-color="#ffd04b"
        background-color="#2d3a4b"
        text-color="#fff"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        router
        >
        <template v-for="(item, index) in routers_one">
            <el-sub-menu v-if="!item.hidden" :key="item.id" :index="index">
                <template #title>
                    <i :class="item.icon"></i>
                    <span>{{ item.meta.name }}</span>
                </template>

                <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.path">{{ subItem.meta.name }}</el-menu-item>
            </el-sub-menu>
        </template>
        </el-menu>
        
            <p class="logo_text">
                @logo logo
            </p>
       
  </div>
</template>

<script>
export default {
    name:'navMenu',
    // setup(props, { root }){
    //     console.log(root.$router)
    // },
    data(){
        return{
            routers_one: [],
            isCollapse: false
        }
    },
    methods:{
        handleOpen(key, keyPath){
            console.log(key, keyPath)
        },
        handleClose(key, keyPath){
            console.log(key, keyPath)
        }
    },
    mounted(){
        var that = this
        that.$data.routers_one = that.$router.options.routes
        console.log(that.$router.options.routes)
        
    }
};
</script>

<style>
/* 导航一、选项四 */
.el-sub-menu__title{
    padding-left: 0px !important;
    margin-left: 40px;
}
/* 导航二。。。 */
.el-menu-item{
    padding-left: 60px !important;
}
.nav_main{
    padding-left: 40px !important;
}
.logo_div{
    display: flex;
    justify-content: center;
}
.logo{
    height: 60px;
    margin: 10px auto;
}
.logo_text{
    color: #fff;
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
</style>